<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>搜索详情</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        /*//头部*/
        body{
            font-size: 14px;
        }
        .headUl{
            font-size: 14px;
        }
        .headUl li{
            width: 20%;
            color: #000;
        }
        .headUl li span{
            font-size: 14px;
        }
        .headUl li.active span{
            display: inline-block;
            position: relative;
        }
        .headUl li.active span:before{
            content: "";
            width: 100%;
            bottom: 0;
            height: 2px;
            left: 0;
            position: absolute;
            background: #ff3333;
        }
        .headUl {
            width: 100%;
            display: box;
            display: -webkit-box;
            box-sizing: border-box;
            font-size: 16px;
            height: 45px;
            background-color: #fff;
            /*overflow: hidden;*/
        }
        .iConent:before {
            content: "\e700" !important;
        }
        .aui-bar .aui-title{
            right: 45px;
            left: 45px;
        }
        .aui-searchbar-wrap{
            background:none;
        }
        .aui-searchbar{
            background:#ebeced !important;
        }
        .aui-bar .aui-iconfont{
            color: #c8c7cc;
        }
    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class=" header1  hidde aui-border-b " id="header-title">
        <div class="aui-title">
            <div class="aui-searchbar-wrap demo" id="search">
                <div class="aui-searchbar aui-border-radius" tapmode onclick="openToTwo('search')">
                    <i class="aui-iconfont aui-icon-search"></i>
                    <div class="aui-searchbar-text">搜索你想要的商品名称</div>
                    <div class="aui-searchbar-input">
                        <form action="javascript:search();">
                            <input type="search" placeholder="搜索你想要的商品名称" id="search-input">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ul class="headUl aui-border-t aui-border-b">
        <li class="active" data-type="1" tapmode onclick="switchChange(this)">
            <span> 综合</span>
        </li>
        <li data-type="2" tapmode onclick="switchChange(this)">
            <span>新品</span>
        </li>
        <li data-type="3" tapmode onclick="switchChange(this)">
            <span>销量</span>
        </li>
        <li data-type="4" tapmode onclick="switchChange(this)">
            <span>价格</span>
        </li>
        <li tapmode onclick="changeView(this)" view-type="bigPic">
            <i class="aui-iconfont aui-icon-cascades icon-left-coler"></i>
        </li>
    </ul>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/iscroll2.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var mobile = api.pageParam.mobile;
        //首页nav传过来的参数
        var searchValue=api.pageParam.searchValue;
        if(searchValue){
            $(".aui-searchbar-text").text(searchValue);
        }
        var header = $api.dom('header');
        var searchContent= api.pageParam.content;
        if(searchContent){
            alert(searchContent)
        }
        //$api.fixStatusBar(header);
        api.setStatusBarStyle({
            style : 'light'
        });
        var header_h = $api.offset(header).h;
        var body_h = $api.offset($api.dom('body')).h - header_h;
        api.openFrame({
            name : 'searchInfo_frm',
            url : 'searchInfo_frm.html',
            rect : {
                x : 0,
                y : header_h,
                w : 'auto',
                h : body_h
            },
            pageParam : {
                mobile : mobile,
                searchValue:searchValue
            },
            bounces : true,
            vScrollBarEnabled : false,
            hScrollBarEnabled : false
        });
    }

    function switchChange(obj){
        // 改变选择状态
        changeCheck(obj);
        var dataID=$(obj).attr("data-id");
        if(dataID){
            $('#List-content').empty();
            getData(dataID);
        }
    }
    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj){
        $(obj).parent().find("li").removeClass("active");
        $(obj).addClass("active");
    }
    function changeView(obj) {
        var viewType = $(obj).attr("view-type");
        api.execScript({
            frameName: 'searchInfo_frm',
            script: 'changeView("'+viewType+'")'
        });

        if (viewType == "bigPic") {
            //一行两列
            $(".aui-icon-cascades").addClass("iConent");
            $(obj).attr("view-type", "smallPic");
        } else if (viewType == "smallPic") {
            //一行一列
            $(".aui-icon-cascades").removeClass("iConent");
            $(obj).attr("view-type", "bigPic");
        }
    }
</script>
</html>
